<template>
    <div>
        <div id="slider" class="mui-slider" >
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" >
                <!-- 手动添加一个标签来设置第一个元素的颜色 -->
                <div :class="['mui-scroll',isFlag==true?'color':'']" >
                <a class="mui-control-item " v-for="item,index in navList" :key="item" @click.prevent="to(index+1)" >
                        {{item}}
                    </a>

                </div>
            </div>
        </div>
        <div v-for="item in photoList" class="photoList" :key="item.url" @click="toPhotoInfo(item.url)">
            <!-- 实现懒加载技术 -->
            <img v-lazy="item.url" :title="item.type" :alt="item.type">
            <p>{{item.createdAt}}</p>
         </div>
    </div>
</template>
<script >
    import mui from '../../lib/mui/js/mui.min.js'
    import {Toast} from 'mint-ui'

    export default{
        data(){
            return {
                photoList:[],
                navList:['全部','明星','网红','街拍','清新','粉嫩','欧美风'],
                page:2,
                isFlag:true
            }
        },
        methods:{
            picList(){
                this.$http.get('meituApi?page='+this.page).then(ret=>{
                    if (ret.body.code!=200) {
                        Toast('连接已失效')
                    }
                    ret.body.data.forEach(item=>{
                        item.w=600
                        item.h=400
                })
                    this.photoList=ret.body.data
                })
            },
            to(i){
                this.page=i+1
                this.isFlag=false
            },
            toPhotoInfo(url){
                // 编程式导航
                this.$router.push({
                    name:'photoInfo',
                    params:{
                        page:this.page
                }})
            },
        },
        // 只有监听到页码改变时，再一次异步加载，才能渲染页面
        watch:{
            page(newValue,oldValue){
                this.picList()
            }
        },
        created(){
            this.picList()
        },
        mounted(){
            mui('.mui-scroll-wrapper').scroll({
            //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
                deceleration: 0.0005 
            })
        },
    }
</script>
<style scoped lang="scss">
// 解决浏览器不能及时响应滚动，使任何触摸事件都不会产生默认行为
*{
    touch-action: none;
}
    .photoList {
        img{
            width: 100%;
            height: 400px;
        }
        // 懒加载设置图片圈圈的宽高
        img[lazy=loading]{
            width: 32px;
            height: 32px;
            margin-left: 50%;
    }
    p{
        text-align:right;
    }
}
    .color{
        a{
            &:nth-child(1){
                color:#007aff;
            }
        }
    }
</style>